<template>
  <div class="rental-information">
    <a-row type="flex" :gutter="12">
      <a-col span="12" v-for="item of cardList" :key="item.key">
        <div class="flex-box" v-if="imgShow">
          <img class="flex-box__img" :src="item.icon" />
          <div class="flex-box__content">
            <p :style="{ color: item.color, fontWeight: 'bold' }">
              {{ item.value | handlerNumShow }}
            </p>
            <p style="margin-top: 10px">{{ item.label }}</p>
          </div>
        </div>
        <!--        <corner-border-box v-else :inner-style="{ padding: '10px 0' }">-->
        <div v-else class="flex-box__content shadow-box" style="text-align: center; padding: 0">
          <div :style="{ color: item.color, fontWeight: 'bold' }">
            {{ item.value | handlerNumShow }}
          </div>
          <div style="color: #c6c6c6">{{ item.label }}</div>
        </div>
        <!--        </corner-border-box>-->
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { setListDataValueWidthKey } from '@gis/lib/utils/index.js';
import { realityPeopleRentalMsg } from '@gis/lib/api';
import areaCodeMixin from '@gis/lib/mixins/areaCodeMixin.js';
import CornerBorderBox from '@gis/lib/components/corner-border-box.vue';

import czf from '../assets/fang_ic_chuzufang.png';
import zk from '../assets/fang_ic_zuke.png';

export default {
  name: 'rental-information',
  components: { CornerBorderBox },
  props: {
    value: { type: [String, Number], default: undefined },
    imgShow: { type: Boolean, default: true },
  },
  mixins: [areaCodeMixin],
  data() {
    return {
      cardList: [
        {
          label: '出租房数量',
          color: '#92FF32',
          key: 'house',
          value: 0,
          icon: czf,
        },
        {
          label: '租客数量',
          color: '#14FF9E',
          key: 'people',
          value: 0,
          icon: zk,
        },
      ],
    };
  },
  watch: {
    value: {
      immediate: true,
      handler(val) {
        this.getDataObjAsync(Object.assign({}, this.apiParams, { yard_id: val }));
      },
    },
  },
  methods: {
    async getDataObjAsync(params) {
      const { data = [] } = await realityPeopleRentalMsg(params);
      this.cardList = setListDataValueWidthKey(
        this.cardList,
        data.reduce((res, item) => {
          return Object.assign({}, res, { [item.name]: item.value });
        }, {})
      );
    },
  },
};
</script>

<style scoped lang="less">
.rental-information {
  .flex-box {
    display: flex;
    align-items: center;
    &__img {
      margin-right: 10px;
    }
    &__content {
      div:first-child {
        font-size: 24px;
      }
    }
  }
}
</style>
